<template>
  <button class="r-button">Hello</button>
</template>
<script>
export default {};
</script>
<style lang="less">
.r-button {
  font-size: var(--button-size);
  height: var(--button-height);
  padding: 0 1em;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background: var(--button-bg);
  &:hover {
    border-color: var(--border-hover-color);
  }

  &:active {
    background-color: var(--button-active-bg);
  }

  &:focus {
    outline: none;
  }
}
</style>